<template>
    <div v-if="menuList">
        <el-container>
            <el-header height="60px">
                <div class="logo-div">
                    <el-icon class="el-icon-grape"></el-icon>
                    X X X X
                </div>
                <div class="welcome-div">
                    欢迎来的xxxx后台管理系统
                </div>
                <div class="avatar-div">
                    <el-avatar>{{userInfo.realName[0]}}</el-avatar>
                </div>
                <div class="name-div">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                              {{userInfo.realName}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
                            <el-dropdown-item @click.native="handleEdite">修改信息</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <manger-fom  ref="updateForm"  @query="query()" :visible.sync="dialogVisible" ></manger-fom>

            </el-header>
            <el-container> 
                <el-aside width="200px">
                    <el-menu ref="menuRef" @select="selectMenu"  background-color="#545c64"  text-color="#fff" active-text-color="#ffd04b"
                             :default-active="url"  class="el-menu-vertical-demo">
                        <el-menu-item v-for="item in menuList"  :key="item.id" :index="item.path">
                            <i class="el-icon-menu"></i>
                            <span slot="title" v-text="item.name"></span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-tabs style="background-color: white"  @tab-click="tabClick" v-model="editableTabsValue" type="card"  @tab-remove="removeTab">
                        <el-tab-pane :closable="item.name!=1" v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
<!--                            <keep-alive max="12" >-->
                                <router-view ></router-view>
<!--                            </keep-alive>-->
                        </el-tab-pane>
                    </el-tabs>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {mapState} from "vuex"
    import auth from "../util/auth";
    import MangerFom from "../components/manager/mangerFom";
    export default {
        name: "Index",
        components: {MangerFom},
        data() {
            return {
                url: "/index/flower",
                dialogVisible:false,
                editableTabsValue: '1',
                editableTabs: [{
                    title: '工作台',
                    name: '1',
                    content: '/index/table'
                }, ],
                tabIndex: 1
            }
        },
        computed:{
            ...mapState(['userInfo',"menuList"])
        },
        methods:{
            tabClick(item){
                if(this.url==this.editableTabs[item.index].content){
                    return
                }
                this.$router.push(this.editableTabs[item.index].content)
                this.url=this.editableTabs[item.index].content
            },
            selectMenu(index,path) {
                this.url=index
                for (let i = 0; i < this.editableTabs.length; i++) {
                    if(this.editableTabs[i].content==index){
                        this.$router.push(index)
                        this.editableTabsValue=this.editableTabs[i].name
                        return
                    }
                }
                let menu= this.menuList.filter(item=>{return item.path==index })[0]
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: menu.name,
                    name: newTabName,
                    content: menu.path
                });
                this.$router.push(index)
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            this.$router.push(nextTab.content)
                            this.url=nextTab.content
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            handleEdite(){
                this.$refs.updateForm.flag=false
                this.$refs.updateForm.open(this.userInfo.id)
            },
            loginOut(){
                auth.removeToken()
                location.reload()
            },
            query(){
                location.reload()
            }

        },
        mounted() {
            this.url = "/index/table"
            this.$router.push(this.url)
        }
    }
</script>

<style scoped>
    .el-header {
        border-bottom: 1px solid gainsboro;
        padding: 0;
        position: relative;
    }

    .el-aside {
        height: calc(100vh - 60px);
    }

    .el-menu-vertical-demo {
        height: 100%;
    }

    .logo-div {
        width: 200px;
        height: 100%;
        border-right: 1px solid gainsboro;
        text-align: center;
        padding-top: 15px;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 8px;
    }

    .welcome-div {
        text-align: center;
        position: absolute;
        width: 600px;
        height: 60px;
        top: 0px;
        left: 35%;
        padding-top: 16px;
        letter-spacing: 5px;
    }
    .avatar-div, .name-div {
        width: 100px;
        height: 60px;
        position: absolute;
        top: 12px;
        right: 60px;
    }
    .name-div {
        top: 20px;
        right: 10px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-main{
        background-color: #EBEEF5;
        padding: 15px!important;
        height: calc(100vh - 61px);
    }


</style>